<template>
  <div>
    <el-row>
      <el-button
        icon="el-icon-back"
        circle
        style="margin-top: 10px; margin-left: 10px; background-color: skyblue"
        @click="back()"
      ></el-button>
    </el-row>
    <el-divider><Item icon="resume" />岗位展示</el-divider>
    <el-form
      ref="jobInfo"
      :model="jobInfo"
      label-width="100px"
      fullscreenLoading
      class="formStyle"
      disabled
    >
      <el-row>
        <el-col :span="8">
          <el-form-item label="岗位类别">
            <span
              >：{{
                categories.find((item) => item.id === jobInfo.jobCategoryId)
                  .name || ''
              }}</span
            >
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <!-- allow-create -->
          <el-form-item label="岗位名称">
            <span
              >：{{
                jobNameAndIdList.find(
                  (item) => item.id === Number(jobInfo.name)
                ).name || ''
              }}</span
            >
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="所属企业">
            <span
              >：{{
                companyIdAndNameAndCodeList.find(
                  (item) => item.id === jobInfo.companyId
                ).name || ''
              }}</span
            >
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="月薪" prop="monthSalary">
            <span>：{{ jobInfo.monthSalary }}</span>
          </el-form-item></el-col
        >
        <el-col :span="8">
          <el-form-item label="城市选择">
            <span>：{{ jobInfo.workAddress }}</span>
          </el-form-item></el-col
        >
        <el-col :span="8">
          <el-form-item label="要求学历" prop="requireEduId">
            <span
              >：{{
                educationList.find((item) => item.id === jobInfo.requireEduId)
                  .name || ''
              }}</span
            >
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item
            label="要求工作经验"
            prop="requireExperienceId"
            label-width="80"
          >
            <span
              >：{{
                experienceList.find(
                  (item) => item.id === jobInfo.requireExperienceId
                ).name || ''
              }}</span
            >
          </el-form-item></el-col
        >
        <el-col :span="24"
          ><el-form-item label="工作福利">
            <span>：{{ jobInfo.welfare }}</span>
          </el-form-item></el-col
        >
        <el-col :span="24">
          <el-form-item label="职位描述">
            <span>：{{ jobInfo.description }}</span>
          </el-form-item>
        </el-col>

        <!-- <el-col :span="24">
        <el-form-item>
          <el-button
            type="primary"
            @click="submitForm('jobForm')"
            @keydown.enter="submitForm('jobForm')"
            v-loading.fullscreen.lock="fullscreenLoading"
            >确认</el-button
          >
          <el-button @click="resetForm('jobForm')">重置</el-button>
        </el-form-item>
      </el-col> -->
      </el-row>
    </el-form>
  </div>
</template>

<script>
import { regionData, CodeToText } from 'element-china-area-data';
import { mapGetters } from 'vuex';
export default {
  name: 'jobShowPage',
  props: ['jobForm'],
  data() {
    return {
      regionData: regionData,
      jobInfo: {},
    };
  },
  //进入守卫：通过路由规则，进入该组件时被调用
  beforeRouteEnter(to, from, next) {
    //第一个参数to，包含的内容是切换后的路由对象，也就是跳转后的路由对象
    //第二个参数from，包含的内容的是切换前的路由对象，也就是跳转前的路由对象
    //第三个参数next()，是否往下执行，执行的话，如果不写的话路由就不会跳转，操作将会终止
    if (
      from.path.indexOf('resumeDeliveryList') !== -1 ||
      from.path.indexOf('postposting') !== -1 ||
      from.path.indexOf('companyEmploy') !== -1
    ) {
      next();
    } else {
      next({
        name: 'resumeDeliveryList',
      });
    }
  },
  computed: {
    // 岗位
    ...mapGetters('PostPostingMng', ['jobIPage', 'jobList']),
    // 企业
    ...mapGetters('CompanyMng', ['companyIdAndNameAndCodeList']),
    // 工作分类
    ...mapGetters('JobCategoryMng', ['categories', 'jobNameAndIdList']),
    // 数据字典
    ...mapGetters('DictMng', ['educationList', 'experienceList']),
  },

  mounted() {
    // 获取企业列表
    this.getCompanyList();
    // 获取职位分类列表
    this.getCategories();
    // 获取学历列表
    this.getEducationList();
    // 获取工作经验列表
    this.getExperienceList();
    // this.jobInfo = JSON.parse(sessionStorage.getItem('jobInfoForShow'));
    if (this.jobForm) {
      this.jobInfo = {
        ...this.jobForm,
      };
      // 发送请求
      this.$store.dispatch(
        'JobCategoryMng/getIdAndNameList',
        this.jobForm.jobCategoryId
      );
    }
  },
  methods: {
    // 获取公司信息列表
    getCompanyList() {
      this.$store.dispatch('CompanyMng/queryForNameAndIdAndCode').then(() => {
        this.loading = false;
      });
    },
    // 类别选择
    jobCategorySelectChange(val) {
      let obj = this.categories.find((item) => {
        return item.id == val;
      });
      this.jobInfo.jobCategoryName = obj.name;
    },
    // 绑定函数重新加载一下组件
    jobNameSelectChange() {
      this.$forceUpdate();
    },
    // 获取职位分类列表
    getCategories() {
      this.$store.dispatch('JobCategoryMng/getCategories');
    },

    // 获取工作经验列表  -- 从数据字典中获取
    async getExperienceList() {
      // 查询学历id
      let dict = await this.$store.dispatch(
        'DictMng/getDictIdByName',
        '工作经验'
      );
      if (dict && dict.id) {
        this.$store.dispatch('DictMng/getExperienceListByParentId', dict.id);
      } else {
        this.$message({
          message: '返回的学历编号为空',
          type: 'error',
          duration: 1 * 1000,
        });
      }
    },
    // 获取学历列表
    async getEducationList() {
      // 查询学历id
      let dict = await this.$store.dispatch('DictMng/getDictIdByName', '学历');
      if (dict && dict.id) {
        this.$store.dispatch('DictMng/getEduListByParentId', dict.id);
      } else {
        this.$message({
          message: '返回的学历编号为空',
          type: 'error',
          duration: 1 * 1000,
        });
      }
    },

    // 回到学生列表
    back() {
      this.$router.go(-1);
    },
  },
};
</script>

<style></style>
